<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="page-breadcrumb">
            <el-breadcrumb-item>资源管理</el-breadcrumb-item>
            <el-breadcrumb-item>系统应用</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
            <el-form-item>
                <el-input v-model="queryForm.name" placeholder="应用名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryForm.code" placeholder="应用代码" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button v-if="authMap['xzbjyy']" type="default" @click="onAdd" icon="el-icon-plus">新建</el-button>
            </el-form-item>
        </el-form>
        <table-ex
            ref="tableEx"
            :queryCallback="queryCallback"
            :handleSelectionChange="onSelectionChange"
            :size="40"
        >
            <el-table-column prop="name" label="应用名称"></el-table-column>
            <el-table-column prop="code" label="应用代码"></el-table-column>
            <el-table-column prop="url" label="应用地址"></el-table-column>
            <el-table-column prop="description" label="应用描述"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        type="default" 
                        size="mini"
                        class="button-in-cell"
                        @click="onDetail(scope.row.id)"
                    >查看</el-button>
                    <el-button
                        v-if="authMap['xzbjyy']"
                        type="default" 
                        size="mini"
                        class="button-in-cell"
                        @click="onUpdate(scope.row.id)"
                    >编辑</el-button>
                    <el-button
                        v-if="authMap['scyy']"
                        type="danger" 
                        size="mini"
                        class="button-in-cell"
                        @click="onDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </table-ex>
        <sys-application-add
            :show="showAddDialog"
            :success="onAddSuccess"
            :cancel="onAddCancel"
        ></sys-application-add>
        <sys-application-update
            :show="showUpdateDialog"
            :success="onUpdateSuccess"
            :cancel="onUpdateCancel"
            :id="updateId"
        ></sys-application-update>
        <sys-application-detail
            :show="showDetailDialog"
            :success="onDetailSuccess"
            :cancel="onDetailCancel"
            :id="detailId"
        ></sys-application-detail>
    </div>
</template>

<script>
import sys_application_api from '../../api/sys_application_api'
import SysApplicationAdd from './SysApplicationAdd.vue'
import SysApplicationUpdate from './SysApplicationUpdate.vue'
import SysApplicationDetail from './SysApplicationDetail.vue'
import TableEx from '../../components/TableEx.vue'
import { mapState } from 'vuex'

export default {
    components: {
        SysApplicationAdd,
        SysApplicationUpdate,
        SysApplicationDetail,
        TableEx,
    },
    data() {
        return {
            queryForm: {
                id: '',
                key: '',
                createTime: '',
                createTimeRange: ''
            },
            selectedItems: [],
            showAddDialog: false,
            showUpdateDialog: false,
            showDetailDialog: false,
            updateId: null,
            detailId: null,
        }
    },
    computed: {
        ...mapState({
            authMap: state => state.auth.authMap
        })
    },
    methods: {
        queryCallback(param) {
            return sys_application_api.findPage({
                query: this.queryForm,
                ...param
            })
        },
        onQuery(event = null, type = 1) {
            this.$refs.tableEx.refresh(type)
        },
        onSelectionChange(items) {
            this.selectedItems = items
        },
        onAdd() {
            this.showAddDialog = true
        },
        onAddSuccess() {
            this.showAddDialog = false
            this.onQuery()
        },
        onAddCancel() {
            this.showAddDialog = false
        },
        onUpdate(id) {
            this.updateId = id
            this.showUpdateDialog = true
        },
        onUpdateSuccess() {
            this.showUpdateDialog = false
            this.onQuery(null, 2)
        },
        onUpdateCancel() {
            this.showUpdateDialog = false
        },
        onDetail(id) {
            this.detailId = id
            this.showDetailDialog = true
        },
        onDetailSuccess() {
            this.showDetailDialog = false
        },
        onDetailCancel() {
            this.showDetailDialog = false
        },
        onDelete(data) {
            this.$confirm(`<p>删除应用 <strong>${data.name}</strong> </p><p>同时删除该应用下的所有权限</p>是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                sys_application_api.delete(data.id).then(data => {
                    this.$message.success('删除成功!')
                    this.onQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
    }
}
</script>

<style scoped>
</style>

